<template>
	<div class="login">
		<div class="logo-img">
			<img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/login/loginlogo.png" @click="zhuye()"/>
		</div>
		<ul class="login-nav">
			<li :class="{'active':pwdenglu}" @click="logintab(0)">密码登录</li>
			<li :class="{'active':!pwdenglu}" @click="logintab(1)">验证码登录</li>
		</ul>
		<ul class="login-from">
			<li :class="{'active':telimgshow}"><span><img src="../img-login/icon_phone_dis@3x.png"/></span><span><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/login/icon_phone_sel@2x.png"/></span><input type="number" name="" id="" value="" placeholder="请输入手机号码" v-model="tel" @focus="telimgshow=!telimgshow" @blur="telimgshow=!telimgshow" @click="esc1()" /><span><img src="../img-login/icon_close@3x.png" @click="qingchu('t')" v-show="tel" id="typediv1"/></span></li>
			<li v-show="pwdenglu" :class="{'active':pwimgshow}"><span><img src="../img-login/icon_key_dis@3x.png"/></span><span><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/login/icon_key_sel@2x.png"/></span><input type="password" name="" id="" value="" placeholder="请输入密码" v-model="pwm" @focus="pwimgshow=!pwimgshow" @blur="pwimgshow=!pwimgshow" @click="esc2()" /><span><img src="../img-login/icon_close@3x.png" @click="qingchu('p')" v-show="pwm" id="typediv2"/></span></li>
			<li class="login-yzm" v-show="!pwdenglu" :class="{'active':yzmimgshow}"><span><img src="../img-login/icon_check_dis@3x.png"/></span><span><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/login/yzmdl.png"/></span><input type="number" name="" id="" value="" placeholder="请输入验证码" v-model="yzm" @focus="yzmimgshow=!yzmimgshow" @blur="yzmimgshow=!yzmimgshow" /><span @click="hqyzm()" v-if="yzmshow">获取验证码</span><span v-else class="cxfs" v-html="djsyzm"></span></li>
		</ul>
		<p class="wjpassword">
			<router-link to="/pwxg">忘记密码?</router-link>
		</p>
		<p class="denglu" @click="denglu()">登&nbsp;&nbsp;录</p>
		<p class="wx-denglu" @click="wxdenglu"><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/login/icon_weichat@2x.png" /><span>微信登录</span></p>
		<p class="xybtn">——我已经同意并阅读
			<a href="http://www.ntyouxuan.com/index.php?app=article&act=view&article_id=48">《农淘优选用户协议》</a>——</p>
	</div>
</template>

<script>
	import logincss from "../css/login.css"
	import layercss from "../css/layer.css"
	import layerjs from "../js/layer.js"
	var furl = 'http://www.ntyouxuan.com/';
	var newurl = 'http://api.ntyouxuan.com/';
	export default {
		name: "login",
		data() {
			return {
				pwdenglu: true,
				yzmshow: true,
				tel: "",
				pwm: "",
				yzm: "",
				djsyzm: "",
				telimgshow: false,
				pwimgshow: false,
				yzmimgshow: false
			}
		},
		created: function() {
			this.tel = localStorage.getItem("nt-tel");
		},
		methods: {
			logintab: function(num) {
				if(num == 0) {
					this.pwdenglu = true;
				}
				if(num == 1) {
					this.pwdenglu = false;
				}
			},
			esc2: function(){
				document.getElementById("typediv1").style.display="none";
			},
			esc1: function(){
				document.getElementById("typediv2").style.display="none";
			},
			denglu: function() {
				var self = this;
				if(this.pwdenglu) {
					if(this.tel && this.pwm) {
						if(this.tel.length == 11) {
							$.ajax({
								type: "post",
								url: newurl + "wechat/login/pwd_login.json",
								data: {
									"mobile": self.tel,
									"password": self.pwm
								},
								dataType: "json",
								success: function(res) {
									console.log(res);
									if(res.success) {
										localStorage.setItem("nt_user", res.data.token);
										localStorage.setItem("nt_stute", res.data.dst_status);
										localStorage.setItem("nt_laiyuan", "login");
										if(history.length > 1) {
											history.go('-2');
										} else {
											self.$router.push({
												path: '/user'
											});
										}

									} else {
										layer.open({
											content: '请检查账号密码是否正确',
											skin: 'msg',
											time: 3 //3秒后自动关闭
										});
										console.log("请检查账号密码是否正确");
									}

								}
							});
						} else {
							layer.open({
								content: '请输入正确的手机号',
								skin: 'msg',
								time: 3 //3秒后自动关闭
							});
							console.log("请输入正确的手机号");
						}
					} else {
						layer.open({
							content: '请输入手机号和密码',
							skin: 'msg',
							time: 3 //3秒后自动关闭
						});
						//提示请输入手机号
					}
				} else {
					//验证码登录
					$.ajax({
						type: "post",
						url: newurl + "wechat/login/code_login.json",
						data: {
							"mobile": self.tel,
							"mcode": self.yzm
						},
						dataType: "json",
						success: function(res) {
							if(res.success) {
								localStorage.setItem("nt_user", res.data.token);
								localStorage.setItem("nt_stute", res.data.dst_status);
								localStorage.setItem("nt_laiyuan", "login");
								history.go(-2);
							}else{
								layer.open({
									content: '验证码错误',
									skin: 'msg',
									time: 3 //3秒后自动关闭
								});
							}

						}
					});
				}
			},
			zhuye: function(){
				window.location.href='http://www.ntyouxuan.com/newnt/#/';
			},
			qingchu: function(item) {
				if(item == "t") {
					this.tel = "";
				}
				if(item == "p") {
					this.pwm = "";
				}
			},
			wxdenglu: function() {
				$.ajax({
					type: "get",
					url: "http://www.ntyouxuan.com/index.php?app=ajax_third_login&act=wx_code",
					data: {
						'type': 1
					},
					dataType: 'json',
					success: function(res) {
						if(res.done) {
							location.href = res.retval;
						}
					}
				});
			},
			hqyzm: function() {
				var self = this;
				if(this.tel && this.tel.length == 11) {
					this.yzmshow = false;
					self.djsyzm = '60秒后<br />重新发送';
					for(var i = 60; i > 0; i--) {
						(function(i) {
							var a = i;
							var b = 60;
							setTimeout(function() {
								self.djsyzm = b - a + '秒后<br />重新发送';
								if(a == 60) {
									self.yzmshow = true;
								}
							}, i * 1000);
						})(i);
					};
					$.ajax({
						type: "post",
						url: newurl + "wechat/login/get_login_code.json",
						data: {
							"mobile": self.tel
						},
						dataType: "json",
						success: function(res) {
							console.log(res);
						}
					});
				} 
			}
		},
		mounted:function(){

		}
	}
</script>

<style>

</style>